<template>
    <ul>
        <li v-for="item in list" :key="item.id" @click="$router.push('/detail/' + item.id)">
            <div class="itemImg">
                <img :src="item.image">
            </div>
            <div class="itemInfo">
                <p class="van-multi-ellipsis--l2">{{ item.title }}</p>
                <p class="price">￥ {{ item.price }}</p>
            </div>
        </li>
    </ul>
</template>
<script>
import request from '@/utils/request'
export default {
    data() {
        return {
            list: []
        }
    },
    created() {
        request.get('/list', {
            params: {
                pagination: 1,
                pageNum: 40
            }
        }).then(res => {
            if (res.data.code == 200) {
                this.list = res.data.data
            }
        })
    }
}
</script>
<style lang="scss" scoped>
ul {
    /* 浮动会导致父元素高度丢失 */
    overflow: hidden;

    li {
        float: left;
        width: 49%;
        margin: 0.5%;

        .itemImg {
            img {
                width: 100%;
            }
        }

        .itemInfo {
            padding: 2px 8px;

            .price {
                color: red
            }

        }
    }
}
</style>